<template>
  <div class="not-find-box">
    <div class="not-find-img" />
    <h1>页面不存在或者没有权限访问</h1>
    <h2 class="backtext">即将在 {{ backSeconds }} 秒后返回上一页</h2>
  </div>
</template>

<script>
export default {
  name: "NotFind",
  data() {
    return {
      backSeconds: 3,
      times: null,
    };
  },
  mounted() {
    this.times = setInterval(() => {
      this.backSeconds--;
      if (this.backSeconds <= 0) {
        clearInterval(this.times);
        this.$router.go(-1);
      }
    }, 1000);
  },
};
</script>

<style scoped>
.not-find-box {
  font-size: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}
.not-find-img {
  width: 360px;
  height: 310px;
  background: url("../../assets/img/404-01.svg") no-repeat center;
  margin: 0px auto 0px;
  background-size: cover;
}
.backtext {
  margin-top: 10px;
}
</style>
